<template>
  <div class="flex-1 page_contain">
    <div class="app-container">
      <!-- 搜索框 -->
      <div class="search-container">
        <el-form :model="searchParam" :inline="true" label-width="72px">
          <el-form-item label="工段">
            <el-select
              v-model="searchParam.workshopSectionId"
              placeholder="请选择工段"
              clearable
              filterable
              @change="changeWorkshopSection"
            >
              <el-option
                v-for="item in workshopSectionList"
                :key="item.id"
                :label="item.workshopSectionCode"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="工序">
            <el-select
              v-model="searchParam.processId"
              placeholder="请选择工序"
              clearable
              filterable
              @change="processChange"
            >
              <el-option
                v-for="item in processCodeList"
                :key="item.processId"
                :label="item.processCode"
                :value="item.processId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="生产线">
            <el-select
              v-model="searchParam.processEquipId"
              placeholder="请选择生产线"
              clearable
              filterable
              @change="processEquipChange"
            >
              <el-option
                v-for="item in processEquipList"
                :key="item.processEquipId"
                :label="item.processEquipCode"
                :value="item.processEquipId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="设备">
            <el-select
              v-model="searchParam.equipIds"
              placeholder="请选择设备"
              clearable
              filterable
              multiple
              collapse-tags
              collapse-tags-tooltip
              @change="equipChange"
              class="select-device"
            >
              <el-option
                v-for="item in equipList"
                :key="item.equipId"
                :label="item.equipName"
                :value="item.equipId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="客户">
            <el-select
              v-model="searchParam.projectIds"
              placeholder="请选择客户"
              clearable
              filterable
              multiple
              collapse-tags
              collapse-tags-tooltip
              class="select-device"
              @change="projectChange"
            >
              <el-option
                v-for="item in projectList"
                :key="item.projectId"
                :label="`${item.projectName}`"
                :value="item.projectId"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="型号描述">
            <el-select
              v-model="searchParam.productModels"
              placeholder="请选择型号描述"
              filterable
              multiple
              collapse-tags
              collapse-tags-tooltip
              class="select-device"
              @change="productChange"
              :filter-method="customFilter1"
            >
              <el-option
                v-for="item in filteredOptions1"
                :key="item.productModel"
                :label="`${item.productModelName ?? ''}`"
                :value="item.productModel"
              />
            </el-select>
            <!-- <el-input
              v-model="searchParam.productModel"
              placeholder="请输入产品型号"
              clearable
              @keyup.enter="search"
            /> -->
          </el-form-item>
          <el-form-item label="产品型号">
            <el-select
              v-model="searchParam.productModels"
              placeholder="请选择产品型号"
              filterable
              multiple
              collapse-tags
              collapse-tags-tooltip
              class="select-device"
              @change="productChange"
              :filter-method="customFilter"
            >
              <el-option
                v-for="item in filteredOptions"
                :key="item.productModel"
                :label="item.productModel"
                :value="item.productModel"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="程序名">
            <el-input
              v-model="searchParam.programName"
              placeholder="请输入程序名"
              clearable
              @keyup.enter="handleSearch"
            />
          </el-form-item>
          <el-form-item label="零件名称">
            <el-input
              v-model="searchParam.partName"
              placeholder="请输入零件名称"
              clearable
              @keyup.enter="handleSearch"
            />
          </el-form-item>
          <el-form-item label="工艺参数">
            <el-select
              v-model="searchParam.parameterDescs"
              placeholder="请选择工艺参数"
              filterable
              multiple
              collapse-tags
              collapse-tags-tooltip
              class="select-device"
              :disabled="
                !searchParam.equipIds.length &&
                !searchParam.productModels.length
              "
            >
              <el-option
                v-for="(item, index) in collectParamList"
                :key="index"
                :label="item.parameterDesc"
                :value="item.parameterDesc"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="采集状态">
            <el-select
              v-model="searchParam.collectStatus"
              placeholder="请选择采集状态"
              clearable
            >
              <el-option
                v-for="item in useDictionary('CollectStatus')"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <i-ep-search />
              搜索
            </el-button>
            <el-button @click="resetHandle">
              <i-ep-refresh />
              重置
            </el-button>
            <el-button
              type="primary"
              plain
              :disabled="ids.length === 0"
              @click="batchAction()"
              >批量操作</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 列表 -->
      <el-card shadow="never" class="table-container">
        <el-tabs
          type="border-card"
          @tab-click="tabClickHandle"
          v-model="activeTabs"
        >
          <el-tab-pane key="1" label="趋势图" name="1" class="chart_tab" lazy>
            <div class="flex h-[280px] overflow-hidden">
              <div
                class="flex-1 h-full"
                v-if="echartData.collectStatusChart?.data?.length > 0"
              >
                <psmReportContrast-pie
                  :id="`${activeTabs}_allTotal`"
                  :params="echartData.collectStatusChart.data"
                  :title="echartData.collectStatusChart.name"
                  key="11"
                />
              </div>
              <div
                class="flex-1 h-full"
                v-if="echartData.noCollectChart?.xdata?.length > 0"
              >
                <psmReportContrast-bar
                  :params="echartData.noCollectChart"
                  :title="echartData.noCollectChart.name"
                  :id="`${activeTabs}_allClose`"
                  key="33"
                />
              </div>
            </div>

            <el-table
              ref="dataTableRef"
              highlight-current-row
              border
              @selection-change="handleSelectionChange"
              v-loading="undefinedListLoading"
              v-if="echartData.undefinedList?.length > 0"
              :data="
                echartData.undefinedList.slice(
                  (currentPage1 - 1) * pageSize1,
                  currentPage1 * pageSize1
                )
              "
              max-height="350"
            >
              <el-table-column
                label="工段"
                prop="workshopSectionCode"
                min-width="100"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                label="工序"
                prop="processCode"
                min-width="100"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                label="生产线"
                prop="processEquipCode"
                min-width="100"
                align="center"
                show-overflow-tooltip
              />

              <el-table-column
                label="产品型号"
                prop="productModel"
                align="center"
                min-width="90"
                show-overflow-tooltip
              />
            </el-table>
            <el-pagination
              :background="true"
              :current-page="currentPage1"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize1"
              layout="total, sizes, prev, pager, next, jumper"
              :total="echartData.undefinedList?.length || 0"
              class="mt-[20px]"
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
            />
          </el-tab-pane>
          <el-tab-pane key="0" label="详细数据" name="0" class="chart_tab" lazy>
            <el-table
              ref="dataTableRef"
              v-loading="loading"
              :data="tableData"
              highlight-current-row
              border
              :maxHeight="tableHeight"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column
                label="工段"
                prop="workshopSectionCode"
                min-width="100"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                label="工序"
                prop="processCode"
                min-width="100"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                label="生产线"
                prop="processEquipCode"
                min-width="100"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                label="设备"
                prop="equipName"
                min-width="130"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                label="零件名称"
                prop="partName"
                min-width="150"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                label="客户"
                prop="projectName"
                align="center"
                min-width="120"
                show-overflow-tooltip
              />
              <el-table-column
                label="型号描述"
                prop="productModelName"
                align="center"
                min-width="90"
                show-overflow-tooltip
              />
              <el-table-column
                label="产品型号"
                prop="productModel"
                align="center"
                min-width="90"
                show-overflow-tooltip
              />
              <el-table-column
                label="程序名"
                prop="programName"
                min-width="90"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                label="参数名称"
                prop="parameterDesc"
                min-width="130"
                align="left"
                show-overflow-tooltip
              />
              <el-table-column
                label="采集状态"
                prop="collectStatus"
                min-width="80"
                align="center"
                show-overflow-tooltip
              >
                <template #default="scope">
                  <span>{{
                    useDictionary(
                      "CollectStatus",
                      scope.row.collectStatus ?? ""
                    )
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="最后采集时间"
                prop="lastCollectTime"
                width="165"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                label="参数类型"
                prop="processDataType"
                min-width="92"
                align="center"
                show-overflow-tooltip
              >
                <template #default="scope">
                  <el-tag v-if="scope.row.processDataType == 2"
                    >加工参数</el-tag
                  >
                  <el-tag type="success" v-if="scope.row.processDataType == 3"
                    >过程参数</el-tag
                  >
                </template>
              </el-table-column>
              <el-table-column
                label="监控数据类型"
                prop="monitorDataType"
                min-width="110"
                align="center"
                show-overflow-tooltip
              >
                <template #default="scope">
                  <el-tag v-if="scope.row.monitorDataType == 1">动态量</el-tag>
                  <el-tag type="success" v-if="scope.row.monitorDataType == 2"
                    >常量</el-tag
                  >
                  <el-tag type="warning" v-if="scope.row.monitorDataType == 3"
                    >补偿量</el-tag
                  >
                </template>
              </el-table-column>
              <el-table-column
                label="参考值"
                prop="parameterValue"
                min-width="74"
                align="right"
                show-overflow-tooltip
              />
              <el-table-column
                label="控制下限"
                prop="lowerLimitValue"
                min-width="74"
                align="right"
                show-overflow-tooltip
              />
              <el-table-column
                label="控制上限"
                prop="upperLimitValue"
                min-width="74"
                align="right"
                show-overflow-tooltip
              />
              <el-table-column
                label="采样频度"
                prop="samplingFrequency"
                min-width="100"
                align="center"
                show-overflow-tooltip
              >
                <template #default="{ row }">
                  <div class="">
                    <span>
                      {{
                        useDictionary(
                          "ScaCollectFrequency",
                          row.samplingFrequency ?? ""
                        )
                      }}
                    </span>
                    <span
                      v-if="
                        row.collectionFrequencyTime &&
                        row.samplingFrequency == '2'
                      "
                      >&nbsp; {{ row.collectionFrequencyTime
                      }}{{
                        row.collectionFrequencyUnit === "s"
                          ? "秒"
                          : row.collectionFrequencyUnit === "m"
                          ? "分钟"
                          : ""
                      }}
                    </span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="生成工单"
                prop="isGenerateWorkOrder"
                min-width="74"
                align="center"
                show-overflow-tooltip
              >
                <template #default="{ $index, row }">
                  <div class="flex justify-center">
                    <el-switch
                      v-model="row.isGenerateWorkOrder"
                      disabled
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="发送邮件"
                prop="isSendMail"
                min-width="74"
                align="center"
                show-overflow-tooltip
              >
                <template #default="{ $index, row }">
                  <div class="flex justify-center">
                    <el-switch
                      v-model="row.isSendMail"
                      disabled
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="第一负责人"
                prop="responsiblePersonName"
                min-width="90"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                fixed="right"
                label="操作"
                width="50"
                align="center"
              >
                <template #default="scope">
                  <el-button
                    type="primary"
                    size="small"
                    link
                    @click="openDialog(scope.row)"
                    ><i-ep-edit
                  /></el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              :background="true"
              :current-page="pageable.pageNum"
              :page-size="pageable.pageSize"
              :page-sizes="[10, 25, 50, 100]"
              :total="pageable.total"
              layout="total, sizes, prev, pager, next, jumper"
              class="mt-[20px]"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>

    <psmParamItemContrast-edit
      :visible="addDialog.visible"
      :title="addDialog.title"
      :data="addDialog.data"
      @reset-table="(id:string) => (id?.length ? getTableList() : reset())"
      :is-readonly="addDialog.readvisible"
      @change-visible="changeVisible"
    />

    <psmParamItemContrast-batchedit
      :visible="batchDialog.visible"
      :title="batchDialog.title"
      :data="batchDialog.data"
      @reset-table="(id:string) => (id?.length ? getTableList() : reset())"
      :is-readonly="batchDialog.readvisible"
      @change-visible="changeBatchVisible"
    />
  </div>
</template>

<script lang="ts" setup>
import request from "@/utils/request";
import _ from "lodash-es";
import {
  useTable,
  useDictionary,
  useComputeTableHeight,
} from "@/utils/useTable";
import router from "@/router";
import dayjs from "dayjs";

defineOptions({
  name: "PSMPSMPARAMITEMCONTRAST",
  inheritAttrs: false,
});

function handleSearch() {
  search();
}

// 定义tableHeight, 将计算注入dataCallBack回调中
const tableHeight = ref();
function dataCallBack(data: any) {
  setTimeout(() => {
    tableHeight.value = useComputeTableHeight() - 60;
  }, 100);
  return data;
}
// 请求参数
const requestApi = "/dmpDosPcm/psmparammonitordetail/queryAllDataByPage";

// 是否需要分页
const pagination = true;

const initParam = {};

// 初始化搜索参数数据
const searchParamInit = {
  workshopSectionId: "",
  workshopSectionCode: "",
  workshopSectionName: "",
  processCode: "", // 工序编号
  processId: "", // 工序id
  equipIds: [],
  projectIds: [],
  productModels: [],
  parameterDescs: [],
  collectStatus: "",
};

const deleteParam = {
  api: "/system/sysRole/delete",
  data: {},
};

// 如果初始化表格需要排序=》const initParam = reactive({sort:''});
// 监听页面 initParam 改化，重新获取表格数据
// watch(() => initParam, getTableList, { deep: true });

// 数据请求错误后处理
function requestError() {}

// 表格操作 Hooks
const {
  tableData,
  pageable,
  searchParam,
  loading,
  ids,
  getTableList,
  search,
  reset,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
}: any = useTable(
  requestApi,
  initParam,
  searchParamInit,
  pagination,
  dataCallBack,
  requestError,
  deleteParam
);

// 获取产品型号列表
const productList = ref<any>([]);
async function getProductList() {
  searchParam.value.productModels = [];
  productList.value = [];
  const { data } = await request({
    // url: `/dmpDosPcm/psmparammonitorrule/getProductList`,
    url: "/dmpDosPcm/psmparammonitorrule/exist/product/options",
    method: "post",
    data: {
      projectIds: searchParam.value.projectIds,
      processId: searchParam.value.processId,
      workshopSectionId: searchParam.value.workshopSectionId,
      equipIds: searchParam.value.equipIds,
      processEquipId: searchParam.value.processEquipId,
    },
  });
  productList.value = data || [];
}
const filteredOptions = ref<any>([]);
// 使用 debounce 包装过滤方法
const customFilter = _.debounce((query: any) => {
  if (!query) {
    filteredOptions.value = [...productList.value];
    return;
  }
  filteredOptions.value = productList.value.filter((option: any) =>
    option.productModel.toLowerCase().includes(query.toLowerCase())
  );
}, 300); // 延迟 300ms

const filteredOptions1 = ref<any>([]);
const customFilter1 = _.debounce((query: any) => {
  if (!query) {
    filteredOptions1.value = [...productList.value];
    return;
  }
  filteredOptions1.value = productList.value.filter((option: any) => {
    return option?.productModelName
      ?.toLowerCase()
      .includes(query.toLowerCase());
  });
}, 300); // 延迟 300ms

function productChange(ids: string) {
  //   collectParamList.value = [];
  //   if (ids.length) {
  //     getCollectParamList();
  //   } else {
  //     searchParam.value.equipIds = [];
  //   }

  startSearchCollect();
}

// 获取工序列表
const processCodeList: any = ref([]);
async function getProcessCodeList() {
  searchParam.value.processId = "";
  searchParam.value.processCode = "";
  const { data } = await request({
    // url: `/mdm/mdmprocess/getList`,
    url: "/dmpDosPcm/psmparammonitorrule/exist/process/options",
    method: "post",
    data: {
      workshopSectionId: searchParam.value.workshopSectionId,
    },
  });
  processCodeList.value = data;
}
function processChange() {
  getProcessEquipList();
  getEquipList();
  getProjectList();
  getProductList();

  startSearchCollect();
}

// 通过工序查询设备列表
const equipList = ref(<any>[]);
async function getEquipList(id?: string) {
  searchParam.value.equipIds = [];
  equipList.value = [];
  const res: any = await request({
    // url: "/iotadmin/scaequipinfo/getlist",
    // url: "/dmpDosPcm/equipmentInfo/getList",
    // url: "/dmpDosPcm/psmparammonitorrule/getScaEquipList",
    url: "/dmpDosPcm/psmparammonitorrule/exist/equip/options",
    method: "post",
    data: {
      processCode: searchParam.value.processCode,
      processId: searchParam.value.processId,
      workshopSectionId: searchParam.value.workshopSectionId,
      processEquipId: searchParam.value.processEquipId,
    },
  });
  if (res.code === 200) {
    equipList.value = res.data;
  }
}
function equipChange(ids?: string) {
  getProjectList();
  getProductList();
  startSearchCollect();
}

const collectParamList = ref(<any>[]);
async function getCollectParamList(id?: string) {
  collectParamList.value = [];
  searchParam.value.parameterDescs = [];
  if (searchParam.value.equipIds.length || searchParam.value.productModels) {
    const res: any = await request({
      url: "/dmpDosPcm/psmparammonitorrule/getParameterList",
      method: "post",
      data: {
        processId: searchParam.value.processId,
        equipIds: searchParam.value.equipIds,
        productModels: searchParam.value.productModels,
      },
    });
    if (res.code === 200) {
      collectParamList.value = res.data || [];
    }
  }
}

// 获取工序列表
const projectList: any = ref([]);
async function getProjectList() {
  searchParam.value.projectIds = [];
  projectList.value = [];
  const { data } = await request({
    // url: `/mdm/mdmprojectinfo/getList`,
    url: "/dmpDosPcm/psmparammonitorrule/exist/project/options",
    method: "post",
    data: {
      processId: searchParam.value.processId,
      workshopSectionId: searchParam.value.workshopSectionId,
      equipIds: searchParam.value.equipIds,
      processEquipId: searchParam.value.processEquipId,
    },
  });
  projectList.value = data;
  getProductList();
}
function projectChange(ids: string) {
  if (ids.length) {
    getProductList();
  } else {
    searchParam.value.projectIds = [];
    getProductList();
  }

  startSearchCollect();
}

function startSearchCollect() {
  searchParam.value.parameterDescs = [];
  collectParamList.value = [];
  if (
    searchParam.value.productModels.length ||
    searchParam.value.equipIds.length
  ) {
    getCollectParamList();
  }
}

onMounted(() => {
  getProcessEquipList();
  getEquipList();
  getProcessCodeList();
  // 获取产品型号列表
  getProductList();
  getTableList();

  getProjectList();
  getWorkshopSectionList();
  getEchartsData();
});

const getEchartsData = async () => {
  undefinedListLoading.value = true;
  const { data } = await request({
    url: "/dmpDosPcm/psmparammonitordetail/queryParamStatusStatistic",
    method: "post",
    data: searchParam.value,
  }).finally(() => {
    undefinedListLoading.value = false;
  });
  undefinedListLoading.value = false;
  echartData.value = data;
  console.log(echartData.value);
};

const addDialog = reactive<DialogOption>({
  visible: false,
  readvisible: false,
  title: "",
  data: {},
});

const batchDialog = reactive<DialogOption>({
  visible: false,
  readvisible: false,
  title: "",
  data: {},
});

// 查询详情
async function getInfo(id: string) {
  request({
    url: `/dmpDosPcm/psmparammonitordetail/get/${id}`,
    method: "get",
  })
    .then((data) => {
      addDialog.data = data.data;
      addDialog.visible = true;
    })
    .catch((res) => {
      console.log(res);
    });
}

/** 打开工艺参数监控规则明细表单弹窗 */
function openDialog(roleObj?: Object) {
  if (roleObj) {
    addDialog.title = "编辑采集状态详情";
    getInfo(roleObj.id);
  }
  addDialog.readvisible = false;
}

function changeVisible(value: boolean) {
  addDialog.visible = value;
  if (!value) {
    addDialog.data = {};
  }
}
function changeBatchVisible(value: boolean) {
  batchDialog.visible = value;
  if (!value) {
    batchDialog.data = {};
  }
}

const resetHandle = () => {
  reset();
  getProcessEquipList();
  getEquipList();
  getProductList();
  getProjectList();
  getProcessCodeList();
};
const workshopSectionList = ref([]);
const getWorkshopSectionList = async () => {
  await request({
    url: `mdm/mdmworkshopsection/getList`,
    method: "post",
    data: {},
  }).then((res) => {
    workshopSectionList.value = res.data;
  });
};

// 获取工序列表
const processEquipList: any = ref([]);
async function getProcessEquipList() {
  searchParam.value.processEquipId = "";
  processEquipList.value = [];
  const { data } = await request({
    // url: `/mdm/mdmprocess/getList`,
    url: "/dmpDosPcm/psmparammonitorrule/exist/processEquip/options",
    method: "post",
    data: {
      workshopSectionId: searchParam.value.workshopSectionId,
      processId: searchParam.value.processId,
    },
  });
  processEquipList.value = data;
}
function processEquipChange() {
  getEquipList();
  getProjectList();
  getProductList();
  startSearchCollect();
}

const changeWorkshopSection = (e) => {
  if (e) {
    workshopSectionList.value.forEach((item) => {
      if ((item.id = e)) {
        searchParam.value.workshopSectionName = item.workshopSectionName;
        searchParam.value.workshopSectionCode = item.workshopSectionCode;
      }
    });
  } else {
    searchParam.value.workshopSectionName = "";
    searchParam.value.workshopSectionCode = "";
  }
  getProcessCodeList();
  getProcessEquipList();
  getEquipList();
  getProjectList();
  getProductList();

  startSearchCollect();
};

// tab点击事件
const reportData = ref();
const echartData = ref([]);
async function tabClickHandle(e: any) {
  console.log(e.index);

  if (e.index == "0") {
    handleSearch();
  } else if (e.index == "1") {
    undefinedListLoading.value = true;
    const { data } = await request({
      url: "/dmpDosPcm/psmparammonitordetail/queryParamStatusStatistic",
      method: "post",
      data: searchParam.value,
    }).finally(() => {
      undefinedListLoading.value = false;
    });
    undefinedListLoading.value = false;
    echartData.value = data;
    console.log(echartData.value);
  }
}

let demo = {
  noCollectchart: {
    name: "1",
    data: [
      { name: "AL&LL", value: 1 },
      { name: "EA211", value: 12 },
      { name: "LC&TL", value: 5 },
    ],
    xData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    xDataIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    yData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  },
  collectstatusChart: {
    name: "1",
    data: [],
    xdata: ["AL&LL", "EA211", "GL", "LC&TL"],
    xDataIndex: [],
    ydata: [0, 83, 83, 80],
  },
  undefinedList: [
    {
      id: 1,
      value: 10,
    },
  ],
};

const activeTabs = ref("1");

// 前端手动分页代码
const currentPage1 = ref(1); // 当前页码
const total1 = ref(10); // 总条数
const pageSize1 = ref(10); // 每页的数据条数

// 表格操作 Hooks
// const { loading }: any = useTable();
const undefinedListLoading = ref(false);
const handleSizeChange1 = (val) => {
  currentPage1.value = 1;
  pageSize1.value = val;
};
const handleCurrentChange1 = (val) => {
  currentPage1.value = val;
};

const batchAction = () => {
  if (ids.value.length == 0) {
    ElMessage.warning("请选择要操作的数据项");
    return;
  }
  batchDialog.visible = true;
  batchDialog.title = "批量操作采集状态详情";
  batchDialog.data = {
    ids: ids.value,
  };
};
</script>

<style lang="scss" scoped>
.el-switch {
  height: auto;
}
:deep(.select-device) {
  .el-tag {
    padding: 0 4px;
  }
}
</style>
